@charset "utf-8";

@import 'reset';



$font-size:40px;
@function r($px){
    @return $px/$font-size * 1rem;
}


@mixin borradius($borpx){
    -webkit-border-radius: $borpx;
    -moz-border-radius: $borpx;
    border-radius: $borpx;
}



.web{
    position: relative;
    width: 100%;
    height: 100%;
    background-color:#017dc5;
//  overflow: hidden;
}


.header{
    position: relative;
    .header-prize{
        position: relative;
        width: 100%;
        height: r(600px);
        background: url(../img/activity/prize-img.png) no-repeat center;
        background-size: 100%;
        padding: 0 r(45px);
        z-index: 1;
        .img-wrap{
            position: absolute;
            top: r(195px);
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(300px);
            height: r(300px);
            @include borradius(50%);
            overflow: hidden;
            text-align: center;
        }
        img{
            width: 100%;
            vertical-align: middle;
        }
    }
    .header-title{
        position: absolute;
        top: r(65px);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: r(375px);
        height: r(61px);
        background: url(../img/activity/activity-thead.png) no-repeat center;
        background-size: 100%;
        z-index: 2;
    }
    .header-prizename{
        position: absolute;
        top: r(550px);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: r(485px);
        height: r(62px);
        background: url(../img/activity/prize-title.png) no-repeat center;
        background-size: 100%;
        z-index: 2;
    }
    .header-text{
        position: absolute;
        top: r(630px);
        width: 100%;
        font-size: r(32px);
        color: #fff;
        text-align: center;
        z-index: 2;
    }
}




.footer{
    position: absolute;
//  top: r(800px);
    bottom: 0;
    width: 100%;
    height: r(400px);
    background: url(../img/activity/activity-cloud.png) no-repeat center bottom;
    background-size: 100%;
    background-color: #00a0e9;
    padding-top:r(60px);
    padding-left: r(75px);
    .code{
        float: left;
        width:r(150px);
        height: r(150px);
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .footer-text{
        float: left;
        height: r(150px);
        font-size: r(28px);
        line-height: r(40px);
        color: #fff;
        margin-left: r(20px);
        padding-top: r(35px);
    }
}
